<template>
  <div class="like">
    <div class="likeTop">
      <img class="mp-title-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="猜你喜欢">
      猜你喜欢
    </div>
    <div class="likeBottom">
      <ul>
        <li v-for="itm in likeList" :key="itm.id">
          <div class="itmLeft"><img :src="itm.imgUrl" alt="图片"></div>
          <div class="itmRight">
            <p>{{itm.title}}</p>
            <div class="likeGrade">
              <span>★★★★★</span>
              <span>{{itm.grade}}</span>
            </div>
            <div class="pri">
              <div class="likePrice"><i>￥</i><span>{{itm.price}}</span>起</div>
              <div class="likeAddress">{{itm.address}}</div>
            </div>
          </div>
        </li>
      </ul>
      <div class="all">
        查看所有产品
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        "likeList":[
          {
            "id":"01",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1703/57/5794796148ac680da3.img.png_200x200_0cf91d82.png",
            "title":"乐华城•乐华欢乐世界",
            "grade":"6322条评论",
            "price":"220",
            "address":"泾阳县"
          },{
            "id":"02",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/201304/09/3005b70fe5a65773c8d65eac.jpg_200x200_837f52ee.jpg",
            "title":"乐华城•乐华欢乐世界",
            "grade":"6322条评论",
            "price":"220",
            "address":"泾阳县"
          },{
            "id":"03",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1411/9d/d74294e6031d93218b9ccfa621926d25.water.jpg_200x200_bb991fa2.jpg",
            "title":"乐华城•乐华欢乐世界",
            "grade":"6322条评论",
            "price":"220",
            "address":"泾阳县"
          },{
            "id":"04",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1505/b0/b093339694db4a11.water.jpg_200x200_10f65a8e.jpg",
            "title":"乐华城•乐华欢乐世界",
            "grade":"6322条评论",
            "price":"220",
            "address":"泾阳县"
          },{
            "id":"05",
            "imgUrl":"http://img1.qunarzz.com/sight/p0/1806/39/399ac563bb1f68d7a3.img.jpg_200x200_1b0e36ec.jpg",
            "title":"乐华城•乐华欢乐世界",
            "grade":"6322条评论",
            "price":"220",
            "address":"泾阳县"
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .pri{
    position: relative;
  }
  .like{
    background: #fff;
    margin-top: .1rem;
  }
  .likeTop{
    font-size: .16rem;
    color:#212121;
    padding:.1rem .1rem;
  }
  .likeTop img{
    width:.15rem;
    height:.15rem;
  }
  .likeBottom li:after{
    content:"";
    display: block;
    clear: both;
  }
  .likeBottom li{
    border-bottom: 1px solid #e0e0e0;
    padding:.1rem 0;
  }
  .likeBottom ul{
    padding-left: .1rem;
  }
  .itmLeft{
    float: left;
    width:1rem;
    height: 1rem;
  }
  .itmLeft img{
    width:100%;
  }
  .itmRight{
    float: left;
    padding-left: .1rem;
    width:69%;
  }
  .itmRight p{
    font-size: .16rem;
    color:#212121;
    margin-top: .13rem;
  }
  .likeGrade{
    font-size: .1rem;
    color:#616161;
    margin: .1rem 0;
  }
  .likeGrade span:nth-child(1){
    margin-right: .2rem;
    color: #ff8300;
  }
  .likePrice{
    font-size: .1rem;
    color:#616161;
    float:left;
  }
  .likePrice span{
    font-size: .2rem;
    color: #ff8300;
  }

  .likePrice i{
    font-style: normal;
    font-size: .1rem;
    color: #ff8300;
  }
  .pri .likeAddress{
    font-size: .1rem;
    color:#616161;
    position: absolute;
    right: 0;
    top:.05rem;
  }
  .all{
    padding: .1rem 0;
    color: #00afc7;
    font-size: .14rem;
    line-height: .2rem;
    text-align: center;
  }
</style>
